*{margin:0; padding: 0; box-sizing: border-box;}
*::before, *::after{box-sizing: border-box; }


@keyframes circle{
  0% {transform: rotate(0deg); } 
  100% {transform: rotate(360deg); } 
}

.page{display: flex; flex-direction: column; height: 100vh;
	/* background: transparent url('http://pluctbqfp.bkt.clouddn.com/cover2.jpg') no-repeat center; */
	/* background-size: cover; */
}

.disc-container{position: relative; }
.disc-container .icon-wrapper{position: absolute; z-index: 1; display: flex; 
	justify-content: center; align-items: center;
	height: 14vw; width: 14vw;
	border-radius: 50%; background: rgba(0,0,0,0.5);
	pointer-events: none;
}
.disc-container .icon {width: 14vw; fill: white; }
.disc-container .pointer{width: 24vw; position: absolute; left: 45vw; z-index: 1;
	transform-origin: 10px top; transition: all 0.6s; transform: rotate(-20deg)}
.disc-container.playing .pointer{transform: rotate(0)}
.disc-container .disc{display: flex; justify-content: center; align-items: center; margin-top: 18vw; }
.disc-container .ring{width: 79vw; } 
.disc-container .light{width: 79vw; position: absolute; animation: circle 20s infinite linear; animation-play-state: paused;}
.disc-container .cover{width: 50vw; position: absolute; border-radius: 50%;  
  animation: circle 20s infinite linear; 
  animation-play-state: paused;
}
.disc-container.playing .light,
.disc-container.playing .cover{
  animation-play-state: running;
}

.disc-container.playing .icon-wrapper {opacity: 0;}
.disc-container .icon-pause{display: none; }
.disc-container.playing .icon-pause{display: block; }
.disc-container.playing .icon-play{display: none; }

.song-description{
	flex-grow: 1;
	color: #AEABAC;
	text-align: center;
	line-height: 2;
	margin-top: 20px;
}
.song-description h1{
	margin-bottom: 10px;
	color: white;
	font-size: 18px;
}
.song-description p{
	font-size: 16px;
	line-height: 24px;
}
.song-description .lines{
	transition: transform 0.3s;
}
.song-description .lyric{
	height: 72px;
	overflow: hidden;
}
.song-description p.active{
	color: white;
}

.page > .links{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #D43B32;
}
.page > .links > a{
	width: 38.5vw;
	margin: 1em;
	text-align: center;
	border: 1px solid #D43B32;
	background: transparent;
	padding: 1.5vw;
	color: inherit;
	text-decoration: none;
	border-radius: 1.3vw;
	letter-spacing: 1vw;
}
.page > .links > a.main{
	background: #D43B32;
	color: white;
}	

.page > .background{
	content: '';
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background: transparent center center no-repeat;
	filter: blur(5px);
	z-index: -1;
	background-size: cover;
}

.lyricWrapper {
	height: 19vw;
	margin: 10px;
    overflow: hidden;
	margin: 0 auto;
    color: hsla(0,0%,100%,.6);
    top: 30px;
	left:30%;
}

.lyricContainer {
	transition: all .5s;
    position: relative;
    text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000; 
}



.current-line-1 {
    color: #fff;
}